<template>
	<div style="height:100%;background-color: #fff;">
		<div class="search" @click="search">
			<div class="search-main">
				<i class="iconsousuo iconfont mr"></i>搜索关键字
			</div>
		</div>
		<div class="swiper">
			<van-swipe :autoplay="3000" style="height:100%;">
				<van-swipe-item v-for="(item, index) in bannerList" :key="index" >
					<img v-lazy="item.bannerImage" style="width: 100%;" @click="navTo(item)"/>
				</van-swipe-item>
			</van-swipe>
		</div>
		<div class="container">
			<div class="tabs-main">
				<van-tabs background="#FFF6F4" title-active-color="#FF5D6A" :sticky="true" :swipeable="true" @change="tabsChange"
				 @rendered="tabsRendered">
					<van-tab v-for="(tab,index) in tabList" :title="tab.category" :key="index" v-if="tabList.length">
						<van-list :immediate-check="false" v-model="tab.loading" :finished="tab.finished" finished-text="没有更多了" @load="scrollEvent">
							<v-item v-for="item in tab.dataList" v-if="tab.dataList.length" :videoItem="item" />
							</v-item>
						</van-list>
					</van-tab>
				</van-tabs>
			</div>
		</div>
		<div class="tools">
			<div class="tool upload-btn">
				<router-link to="/cart">
					上传<br />视频
				</router-link>
			</div>
			<!-- <div class="tool mine-btn">
				<router-link to="/user">
					我的<br />视频
				</router-link>
			</div> -->
		</div>
	</div>
</template>
<script type="text/javascript">
	import {
		login,
		getVideoList,
		getCategoryList,
		getBannerList
	} from '@/api/permission'
	import {
		List,
		Cell
	} from 'vant'
	import vItem from '@/components/item.vue'
	import Cookies from 'js-cookie';
	export default {
		data() {
			return {
				images: [
					'https://img.yzcdn.cn/vant/apple-1.jpg',
					'https://img.yzcdn.cn/vant/apple-2.jpg'
				],
				tabList: [], //tab标签
				bannerList: [], //轮播
				tabActive: 0,
				first: true
			}
		},
		components: {
			[List.name]: List,
			[Cell.name]: Cell,
			vItem
		},
		methods: {
			scrollEvent(e) {
				let self = this
				if (self.tabList.length > 0) {
					let tablist = self.tabList[self.tabActive]
					let page = tablist.page
					if (!tablist.pending && tablist.dataList.length) {
						if ((page.num + 1) == page.total) {
							tablist[`finished`] = true
							tablist[`loading`] = false
							tablist[`pending`] = false
						} else {
							tablist.page.num++
							tablist[`pending`] = true
							self.getVideoListFun(self.tabActive)
						}
					}
				}
			},
			search() {
				this.$router.push({
					name: 'search'
				})
			},
			getVideoListFun(index) {
				let self = this
				let tablist = self.tabList[index]
				let page = tablist.page
				let categoryId = tablist.categoryId
				getVideoList({
					index: page.num, // 页码
					size: page.size, // 每页长度
					categoryId: categoryId
				}).then((response) => {
					// 请求的列表数据
					let arr = response.content
					// // 如果是第一页需手动置空列表
					if (page.num === 0) tablist.dataList = []
					// // 把请求到的数据添加到列表
					tablist.dataList = tablist.dataList.concat(arr)
					tablist.loading = false
					tablist.pending = false
					if (page.num == response.totalPages) {
						tablist.finished = true
					}
					tablist.page = {
						num: response.currentPage,
						total: response.totalPages,
						size: page.size
					}
					self.first = false
				}).catch(() => {

				})
			},
			tabsChange(v) {
				let self = this
				self.tabActive = v
				self.getVideoListFun(v)
			},
			tabsRendered(v) {

			},
			navTo(obj){
				let self = this 
				let forwardType = obj.forwardType
				if(obj.forwardUrl){
					if(forwardType==1){ //视频
						self.$router.push({name:'goods',query:{id:obj.forwardUrl}})
					}else{
						window.location.href = obj.forwardUrl
					}
				}
			}
		},
		mounted() {
			let self = this
			let {accessToken} = this.$route.query;
			if (accessToken) {
			  self.$store.commit('LOGIN_IN',accessToken)
			}
			getBannerList({
				index: 0,
				size: 99,
				status: 1
			}).then(res => {
				if (res.content.length) {
					self.bannerList = res.content
				}
			})
			getCategoryList({
				index: 0,
				size: 99,
				status: 1
			}).then(res => {
				if (res.content.length) {
					res.content.forEach((item, index) => {
						item.loading = false
						item.finished = false
						item.pending = false
						item.page = {
							num: 0,
							size: 10,
							total: null
						}
						item.dataList = [] // 列表数据
					})
					self.tabList = res.content
					self.getVideoListFun(0)
				}
			})
		}
	}
</script>
<style lang="less">
	.mescroll {
		position: fixed;
		top: 0;
		bottom: 0;
		height: auto;
	}

	.search {
		width: 100%;
		padding: 7px 7px;
		box-sizing: border-box;

		&-main {
			padding-left: 11.5px;
			width: 100%;
			height: 36px;
			background-color: #F3F4F8;
			border-radius: 100px;
			box-sizing: border-box;
			font-size: 15px;
			color: #8E8D8D;
			line-height: 36px;

			.iconfont {
				margin-right: 8px;
			}
		}
	}

	.tabs-main {
		height: 80px;
	}

	.swiper {
		width: 100%;
		height: 186px;
	}

	.tools {
		position: fixed;
		bottom: 200px;
		right: 16.5px;

		.tool {
			width: 60px;
			height: 60px;
			font-size: 15px;
			line-height: 20px;
			text-align: center;
			border-radius: 100%;
			box-sizing: border-box;

			a {
				color: #fff !important;
			}

			&.upload-btn {
				background: linear-gradient(90deg, rgba(255, 93, 106, 1) 0%, rgba(255, 140, 86, 1) 100%);
				box-shadow: 0px 3px 5px 0px rgba(255, 119, 95, 0.3);
				margin-bottom: 17px;
				padding-top: 10px;
				color: #fff;
			}

			&.mine-btn {
				background: linear-gradient(270deg, rgba(33, 80, 106, 1) 0%, rgba(52, 62, 75, 1) 100%);
				box-shadow: 0px 3px 5px 0px rgba(45, 69, 86, 0.37);
				padding-top: 10px;
				color: #fff;
			}
		}
	}
</style>
